<template>
  <main role="main">

    <section class="jumbotron text-center">
      <div class="container">
        <h1>校园周边游平台</h1>
        <p class="lead text-muted">
          发现身边最好玩最有趣的第一资讯
        <p>
          <router-link to="/list" class="btn btn-primary my-2 p-3 font-weight-bold">点击进入所有</router-link>
        </p>
      </div>
    </section>

    <div class="album py-5 bg-light">
      <div class="container">
        <div class="title1">最新上线</div>
        <div class="row">
          <div v-for="o in news" class="col-md-4">
            <the-travel v-bind:travels="o"></the-travel>
          </div>
        </div>

        <hr>

        <div class="title1">平台推荐</div>
        <div class="row">
          <div v-for="o in news" class="col-md-4">
            <the-travel v-bind:travels="o"></the-travel>
          </div>
        </div>


      </div>
    </div>

  </main>
</template>

<script>
import TheTravel from "../components/the-travel";
export default {
  name: "index.vue",
  components: {TheTravel},
  data:function (){
    return{
      news: [],
    }
  },
  mounted() {
    let _this = this;
    _this.listNew();
  },
  methods:{
    listNew(){
      let _this = this;
      _this.$ajax.get( 'http://127.0.0.1:9000/business/web/travel/list-new').then((response)=>{
        console.log("查询新上好课结果：", response);
        let resp = response.data;
        if (resp.success) {
          _this.news = resp.content;
        }
      }).catch((response)=>{
        console.log("error：", response);
      })
    }
  }
}
</script>

<style scoped>
.title1{
  margin-bottom: 2rem;
  color: #fafafa;
  letter-spacing: 0;
  text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
  font-size: 2rem;
}
.title2{
  margin-bottom: 2rem;
  color: transparent;
  -webkit-text-stroke: 1px black;
  letter-spacing: 0.04em;
  font-size: 2rem;
}

</style>